<template>
<div class="login w-full h-full flex md:flex-row items-center justify-center">
<el-form :model="loginForm"
  status-icon
  ref="loginFormRef"
  label-width="0px"
  :rules="rules"
  @submit.prevent
  class="loginForm p-6 box-border h-auto loading-box">
  <div class="header p-6 text-center">
    <h2 class="mb-3 text-3xl"> {{ system.name }} </h2>
    <p v-html="title" class="text-gray-400 hover:text-gray-600"></p>
  </div>
  <el-form-item prop="uname">
    <el-input v-model="loginForm.uname" prefix-icon="el-icon-user"
     placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item prop="upass">
    <el-input v-model="loginForm.upass" prefix-icon="el-icon-lock"
      type="password" placeholder="密码"></el-input>
  </el-form-item>
  <el-form-item>
    <div v-if="isSlide">
        <!--# include virtual="/lib/auth-slide.html" -->
    </div>
    <div v-else>
        <!--# include virtual="/lib/auth-code.html" -->
    </div>
  </el-form-item>
  <el-form-item>
    <el-checkbox v-model="loginForm.remember" label="记住我"></el-checkbox>
  </el-form-item>
  <el-form-item>
    <el-button :disabled="!isSlide" class="w-full" @click.stop="onSubmit">登陆</el-button>
  </el-form-item>
  <!-- {{json(loginForm)}}  <br >
  {{json($store.state.uinfo)}} --
  {{ $store.state.isLogin ? 'Y' : 'N' }} -->
</el-form>
</div>
</template>

<script lang="ts">
import base from '@/mixin/base'
import { API } from '@/utils/common'
import { err,suc } from '@/utils/ele'
import { data,rules as dataRules } from '@/validate/loginMv'
import { defineComponent,ref,computed,reactive } from 'vue'
import axios from '@/utils/http'
import store from '@/store/IndexStore'
import router from '@/router/IndexRouter'
const  AUTH_SLIDE = 'auth_slide'
// 不能和v-model 一致
const FORM = 'loginFormRef'
// 获取路由参数
// import {useRoute} from 'vue-router'
// const route = useRoute();
// route.query.id

export default defineComponent({
  name: 'login',
  mixins: [base],
  setup(props,ctx) {
    // 加载localStory 是否登录了等
    console.log(props,ctx);
    const authType  = ref('auth_slide')
    const loginForm = reactive(data)
    const rules     = reactive(dataRules)
    const isSlide   = computed(() => authType.value == AUTH_SLIDE)
    return {
      ...loginForm,isSlide,rules
    }
  },
  methods: {
    async onSubmit () {
      let form = this.$refs[FORM]
      console.log('submit',this.loginForm);
      form.validate(async (valid ) =>{
          if (valid) {
            // dosomething
            let data = await axios.post(API.LOGIN,this.loginForm)
            if(data){
              // console.log('登陆成功 : ',data);
              suc('登陆成功 !!!')
              store.commit('login',data.data.uinfo)
              router.push('/');
            }
          } else {
            // store.commit('logout')
            err('格式错误 !!!')
            return false
          }
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.login{
  .loginForm{
    width: 400px;
    background-color: #f2f2f2;
    border: 1px solid rgba(100,100,100,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
}
</style>